<template>
  <div style="margin:20px">
    <el-row>
      <el-col :span="4">
        <el-card class="box-card" style="text-align:center;">
          <p>已完成直播</p>
          <p>{{liveInfo.finished}}</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card" style="text-align:center;">
          <p>已开始直播</p>
          <p>{{liveInfo.live}}</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card" style="text-align:center;">
          <p>未开始直播</p>
          <p>{{liveInfo.accomplish}}</p>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card class="box-card" style="text-align:center;">
          <p>直播总数</p>
          <p>{{liveInfo.count}}</p>
        </el-card>
      </el-col>

      <el-col :span="6" style="text-align:right">
        <el-button @click="showClass = true">分类管理</el-button>
      </el-col>
    </el-row>
    <el-button type="primary" style="margin:20px;margin-left:0" @click="goAddLive()">创建直播</el-button>

    <el-row style="margin-bottom:20px">
      <el-input v-model="listQuery.name" style="width:30%;" placeholder="请输入名称关键字"></el-input>
      <!-- <el-col>
             <el-select v-model="value" placeholder="全部">
                <el-option>已完成</el-option>
                <el-option>已开始</el-option>
                <el-option>未开始</el-option>
            </el-select>
      </el-col>-->
      <!-- <el-select v-model="value" style="width:90%;"  placeholder="全部">
          <el-option>已完成</el-option>
          <el-option>已开始</el-option>
          <el-option>未开始</el-option>
      </el-select>-->
      <!-- <el-date-picker
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="selectDate"
      ></el-date-picker>-->
      <el-button type="primary" @click="searchLive()" size="middel">搜索</el-button>
    </el-row>
    <el-table :data="roomInfoList" border style="width: 100%">
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.photo" style="width:80px;height:80px;" alt />
          <p>{{scope.row.name}}</p>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="name" label="序号" width="180"></el-table-column>
      <el-table-column align="center" prop="startTime" label="开始时间"></el-table-column>
      <el-table-column align="center" prop="number" label="参与人数(人)"></el-table-column>
      <el-table-column align="center" label="状态">
        <template
          slot-scope="scope"
        >{{scope.row.liveType == 1 ?'正在直播' :scope.row.liveType == 2 ?'预约中' :'回放'}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!-- <span><a>邀请榜</a></span> -->
          <!-- <span>查看讨论内容</span> -->
          <!-- <span>查看群成员</span> -->
          <!-- <span>删除</span> -->
          <span style="cursor:pointer" @click="showAdrees(scope.row)">开始直播 |</span>
          <!-- <span style="cursor:pointer" @click="setTeacher(scope.row)">设置讲师 |</span> -->
          <span style="cursor:pointer" @click="toLiveDetail(scope.row)">编辑 |</span>
          <span style="cursor:pointer" @click="eidetGoods(scope.row)">商品编辑 |</span>
          <span style="cursor:pointer" @click="cooperation(scope.row)">合作申请 |</span>
          <span style="cursor:pointer" @click="watchPeople(scope.row)">观看人数 |</span>
          <span style="cursor:pointer" @click="orderManage(scope.row)">订单管理 |</span>
          <span style="cursor:pointer" @click="showMessage(scope.row)">消息推送 |</span>
          <span style="cursor:pointer" @click="indexRecommend(scope.row)">首页推荐</span>
          <span
            style="cursor:pointer"
            @click="deleteLive(scope.row,2)"
            v-if="scope.row.status == 1"
          >下架 |</span>
          <span
            style="cursor:pointer"
            @click="deleteLive(scope.row,1)"
            v-if="scope.row.status == 2"
          >上架 |</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="10"
      layout="total,  prev, pager, next, jumper"
      :total="listQuery.total"
    ></el-pagination>
    <el-dialog title="推流地址" :visible.sync="showPalyFlow" width="40%">
      <p style="width:90%;word-wrap:break-word;">{{adrees}}</p>
      <el-button @click="handleCopy()">复制</el-button>
      <div id="qrcode" ref="qrcode"></div>
    </el-dialog>

    <el-dialog title="请选择老师" :visible.sync="showTearch" width="40%">
      <el-input placeholder="请输入姓名进行搜索" v-model="teacherName" style="width:70%"></el-input>
      <el-button type="primary" icon="el-icon-search" size="small" @click="addTearcher()">搜索</el-button>
      <div v-if="selectTeacher">已选择:{{selectTeacher}}老师</div>
      <el-table
        ref="multipleTable"
        :data="userList"
        tooltip-effect="dark"
        height="300"
        style="width: 100%;"
      >
        <el-table-column label="名称">
          <template slot-scope="scope">
            <img style="width:50px;height:50px" :src="scope.row.avatar" alt />
            <span>用户名：{{scope.row.userName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="selectTearch(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span>老师简介：</span>
      <el-input type="textarea" v-model="teacherDesc" style="width:60%;"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTearch = false">取 消</el-button>
        <el-button type="primary" @click="confirmTeacherSet()">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="分类管理" :visible.sync="showClass" width="40%">
      <el-form>
        <el-form-item>
          <el-input style="width:30%" v-model="className"></el-input>
          <el-button type="primary" @click="creatClass()">创建分类</el-button>
        </el-form-item>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="classDataList"
        tooltip-effect="dark"
        height="300"
        style="width: 100%;"
      >
        <el-table-column label="分类名称" align="center">
          <template slot-scope="scope">
            <el-input style="width:70%" v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 1"
              type="danger"
              size="mini"
              @click="editClass(scope.row)"
            >停用</el-button>
            <el-button v-else type="success" size="mini" @click="editClass(scope.row)">开启</el-button>
            <el-button type="success" size="mini" @click="saveClass(scope.row)">保存名称</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="商品编辑" :visible.sync="showGoods" width="60%" style="height:800px">
      <el-form ref="form">
        <el-form-item label="VIP">
          <el-table :data="goodsData.vip" border style="width: 100%">
            <el-table-column label="标题" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.title" placeholder="请输入标题"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="详情" align="center">
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入VIP详情"
                  :rows="5"
                  type="textarea"
                  v-model="scope.row.detail"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" placeholder="输入VIP价格（元）"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="代理商">
          <el-table :data="goodsData.partner" border style="width: 100%">
            <el-table-column label="标题" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.title" placeholder="请输入标题"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="详情" align="center">
              <template slot-scope="scope">
                <el-input
                  placeholder="请输入代理商详情"
                  :rows="5"
                  type="textarea"
                  v-model="scope.row.detail"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column label="价格" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" placeholder="输入代理商定金（元）"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="商品" v-if="goodsData.prod.length > 0">
          <el-table :data="goodsData.prod" border style="width: 100%">
            <el-table-column label="名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="售格" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="原价" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.costPrice"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-button type="primary" @click="submitGoods">提交</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGoods = false,getLiveList()">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="合作申请" :visible.sync="showCooperationGoods" width="40%" style="height:800px">
      <el-table
        ref="multipleTable"
        :data="cooperationList"
        tooltip-effect="dark"
        height="500"
        style="width: 100%;"
      >
        <el-table-column label="用户名" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.realName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.mobile}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="观看人员" :visible.sync="showWatch" width="40%" style="height:800px">
      <el-tabs v-model="goodsType" @tab-click="selectPeople">
        <el-tab-pane label="参与人员" name="duration">
          <el-table
            ref="multipleTable"
            :data="durationList"
            tooltip-effect="dark"
            height="500"
            style="width: 100%;"
          >
            <el-table-column label="用户名" align="center">
              <template slot-scope="scope">
                <img
                  :src="scope.row.headimgurl"
                  style="width:50px;height:50px;border-radius:50%"
                  alt
                />
                <p>{{scope.row.realName}}</p>
              </template>
            </el-table-column>
            <el-table-column label="观看时间" align="center">
              <template slot-scope="scope">
                <span>{{(Number(scope.row.time) / 60).toFixed(2)}}分钟</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.mobile}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="浏览人员" name="browse">
          <el-table
            ref="multipleTable"
            :data="browseList"
            tooltip-effect="dark"
            height="500"
            style="width: 100%;"
          >
            <el-table-column label="用户名" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.realName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="浏览时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createdAt}}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.mobile}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="预约人员" name="subscribe">
          <el-table
            ref="multipleTable"
            :data="subscribeList"
            tooltip-effect="dark"
            height="500"
            style="width: 100%;"
          >
            <el-table-column label="用户名" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.realName}}</span>
              </template>
            </el-table-column>
            <el-table-column label="预约时间" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.createdAt}}</span>
              </template>
            </el-table-column>
            <el-table-column label="手机号" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.mobile}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <el-pagination
        @current-change="currentChange"
        :page-size="10"
        layout="total,  prev, pager, next, jumper"
        :total="watchTotal"
      ></el-pagination>
    </el-dialog>

    <el-dialog title="订单管理" :visible.sync="showOrder" width="50%" style="height:800px">
      <el-table :data="orderData" border style="width: 100%">
        <el-table-column prop="nickname" label="名称"></el-table-column>
        <el-table-column prop="mobile" label="手机号"></el-table-column>
        <el-table-column prop="prodName" label="订单类型"></el-table-column>
        <el-table-column prop="payAt" label="购买时间"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="消息推送" :visible.sync="showMessagePush" width="50%">
      <el-tabs v-model="pushType">
        <el-tab-pane label="平台消息推送" name="platform"></el-tab-pane>
        <el-tab-pane label="微信消息推送" name="wechat"></el-tab-pane>
      </el-tabs>
      <template v-if="pushType == 'platform'">
        <el-form :model="message" ref="message" label-width="100px" class="demo-ruleForm">
          <el-form-item label="消息标题" prop="messageTile">
            <el-input v-model="message.messageTile"></el-input>
          </el-form-item>
          <el-form-item label="标题内容" prop="messageDesc">
            <el-input type="textarea" v-model="message.messageDesc"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="showMessagePush = false">取 消</el-button>
          <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
        </span>
      </template>
      <template v-if="pushType == 'wechat'">
        <el-tabs v-model="wechatType" @tab-click="selectWechat()">
          <el-tab-pane label="直播预热提醒" name="preheat"></el-tab-pane>
          <el-tab-pane label="直播前提醒" name="beforLive"></el-tab-pane>
        </el-tabs>
        <template v-if="wechatType == 'preheat'">
          <el-form :model="wechatMessage" label-width="100px" class="demo-ruleForm">
            <el-form-item label="通知描述">
              <el-input v-model="wechatMessage.first"></el-input>
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input type="textarea" v-model="wechatMessage.keyword1"></el-input>
            </el-form-item>
            <el-form-item label="地点位置">
              <el-input type="textarea" v-model="wechatMessage.keyword2"></el-input>
            </el-form-item>
            <el-form-item label="讲师名称">
              <el-input type="textarea" v-model="wechatMessage.keyword3"></el-input>
            </el-form-item>
            <el-form-item label="直播时间">
              <el-input type="textarea" v-model="wechatMessage.keyword4"></el-input>
            </el-form-item>
            <el-form-item label="备注内容">
              <el-input type="textarea" v-model="wechatMessage.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showMessagePush = false">取 消</el-button>
            <el-button type="primary" @click="pushWechatMessage(1)">确 定</el-button>
          </span>
        </template>
        <template v-if="wechatType == 'beforLive'">
          <el-form :model="wechatMessage" label-width="100px" class="demo-ruleForm">
            <el-form-item label="通知描述">
              <el-input v-model="wechatMessage.first"></el-input>
            </el-form-item>
            <el-form-item label="课程名称" prop="messageDesc">
              <el-input type="textarea" v-model="wechatMessage.keyword1"></el-input>
            </el-form-item>
            <el-form-item label="开始时间" prop="messageDesc">
              <el-input type="textarea" v-model="wechatMessage.keyword2"></el-input>
            </el-form-item>
            <el-form-item label="备注内容">
              <el-input type="textarea" v-model="wechatMessage.remark"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showMessagePush = false">取 消</el-button>
            <el-button type="primary" @click="pushWechatMessage(2)">确 定</el-button>
          </span>
        </template>
      </template>
    </el-dialog>

    <el-dialog title="首页推荐" :visible.sync="showSetIndex" width="50%" style="height:800px">
      <el-form :model="setIndex" label-width="200px" class="demo-ruleForm">
        <el-form-item label="推荐（数值越大越靠前）">
          <el-input-number v-model="setIndex.recommend"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSetIndex = false">取 消</el-button>
        <el-button type="primary" @click="setIndexs()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  LiveList,
  saveCommodity,
  cooperation,
  subscribe,
  liveOrder,
  startLive,
  UpdateStatus,
  LivePreheat
} from "@/api/member";
import {
  saveSocialRoom,
  getManager,
  saveLecturer,
  classSet,
  SetTeacher,
  classList,
  getUserByKey,
  classStaus
} from "@/api/social";
import { pushMessage } from "@/api/course";
import QRCode from "qrcodejs2";
import clip from "@/utils/clipboard";
export default {
  data() {
    return {
      showGoods: false,
      showClass: false,
      value: "",
      roomInfoList: [],
      adrees: "",
      showPalyFlow: false,
      showTearch: false,
      teacherName: "",
      selectTeacher: "",
      userList: [],
      JGTeacher: [],
      teacherDesc: "",
      teacherId: "",
      liveId: "",
      socialRoomId: "",
      classDataList: [],
      className: "",
      listQuery: {
        page: 1, // 查询索引开始位置
        limit: 10, // 每页大小
        total: null,
        name: ""
      },
      goodsData: {
        prod: [],
        vip: [{ price: "", title: "", detail: "" }],
        partner: [{ price: "", title: "", detail: "" }],
        liveId: null
      },
      cooperationList: [],
      showCooperationGoods: false,
      showWatch: false,
      durationList: [],
      browseList: [],
      subscribeList: [],
      goodsType: "duration",
      watchTotal: null,
      showOrder: false,
      orderData: [],
      liveInfo: {
        finished: null,
        live: null,
        accomplish: null,
        count: null
      },
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 3,
        messageTypes: 0
      },
      showMessagePush: false,
      setIndex: {
        type: 1,
        recommend: null,
        liveId: null
      },
      showSetIndex: false,
      pushType: "platform",
      wechatMessage: {
        first: "",
        keyword1: "",
        keyword2: "",
        keyword3: "",
        keyword4: "",
        remark: "",
        link: "",
        type: 1 //1直播预热2直播提醒
      },
      wechatType: "preheat"
    };
  },
  watch: {},
  methods: {
    searchLive() {
      this.listQuery.page = 1;
      LiveList({ name: this.listQuery.name }).then(res => {
        this.roomInfoList = res.data.data.data.data;
        this.listQuery.total = res.data.data.data.total;
      });
    },
    selectWechat() {
      this.wechatMessage = {
        first: "",
        keyword1: "",
        keyword2: "",
        keyword3: "",
        keyword4: "",
        remark: "",
        link: "live/liveSubscribe?liveId=" + this.liveId + "&refereeId=",
        type: null //1直播预热2直播提醒
      };
    },
    pushWechatMessage(val) {
      this.wechatMessage.type = val;
      console.log(this.wechatMessage);

      LivePreheat(this.wechatMessage).then(res => {
        this.$message("推送成功");
      });
    },
    setIndexs() {
      UpdateStatus(this.setIndex).then(res => {
        this.$message(res.data.data);
      });
    },
    indexRecommend(item) {
      this.setIndex.liveId = item.liveId;
      this.setIndex.recommend = item.recommend;
      this.showSetIndex = true;
    },
    showMessage(item) {
      this.message.typeId = item.liveId;
      this.liveId = item.liveId;

      this.wechatMessage.link =
        "live/liveSubscribe?liveId=" + item.liveId + "&refereeId=";
      this.showMessagePush = true;
    },
    pushMessage() {
      if (this.message.messageTile == "") {
        this.$message("请填写消息标题");
        return;
      }
      if (this.message.messageDesc == "") {
        this.$message("请填写消息描述");
        return;
      }
      pushMessage(this.message).then(res => {
        this.$message(res.data.data);
      });
      this.showMessagePush = false;
      this.message = {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 3,
        messageTypes: 0
      };
    },
    async deleteLive(item, val) {
      await UpdateStatus({ liveId: item.liveId, status: val }).then(res => {
        this.$message({
          showClose: true,
          message: res.data.data,
          type: "success"
        });
      });
      this.getLiveList();
    },
    orderManage(item) {
      this.showOrder = true;
      liveOrder({ liveId: item.liveId, limit: 1000 }).then(res => {
        this.orderData = res.data.data.data;
      });
    },
    selectPeople() {},
    currentChange(val) {
      this.getWatchData(val);
    },
    watchPeople(item) {
      this.showWatch = true;
      this.getWatchData(1, item.liveId);
    },
    getWatchData(page, id) {
      subscribe({ liveId: id, limit: 10, page: page }).then(res => {
        this.durationList = res.data.data.liveduration.data;
        this.browseList = res.data.data.livebrowse.data;
        this.subscribeList = res.data.data.livesubscribe.data;

        if (this.goodsType == "duration") {
          this.watchTotal = res.data.data.liveduration.total;
        } else if (this.goodsType == "browse") {
          this.watchTotal = res.data.data.livebrowse.total;
        } else if (this.goodsType == "subscribe") {
          this.watchTotal = res.data.data.livesubscribe.total;
        }
      });
    },
    cooperation(item) {
      cooperation({ liveId: item.liveId, limit: 100000 }).then(res => {
        this.cooperationList = res.data.data.data;
      });
      this.showCooperationGoods = true;
    },
    submitGoods() {
      saveCommodity(this.goodsData).then(res => {
        if (res.data.statusCode == 200) {
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success"
          });
        }
      });
    },
    eidetGoods(item) {
      this.showGoods = true;
      this.goodsData.prod = item.prod;
      if (item.vip == null) {
        this.goodsData.vip = [{ price: "", title: "", detail: "" }];
      } else {
        this.goodsData.vip = item.vip;
      }
      if (item.partner == null) {
        this.goodsData.partner = [{ price: "", title: "", detail: "" }];
      } else {
        this.goodsData.partner = item.partner;
      }
      this.goodsData.liveId = item.liveId;
    },

    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.getLiveList();
    },
    async saveClass() {
      await classStaus({ name: val.name, id: val.id }).then(res => {
        this.$message.warning(res.data.data);
      });
      this.getClassData();
    },
    async editClass(val) {
      var status = val.status == 0 ? 1 : 0;
      var name = val.name;
      await classStaus({ status: status, id: val.id }).then(res => {
        this.$message.warning(res.data.data);
      });
      this.getClassData();
    },
    async creatClass() {
      await classSet({ name: this.className }).then(res => {
        this.$message.warning(res.data.data);
        this.className = "";
        this.getClassData();
      });
    },
    getClassData() {
      classList().then(res => {
        this.classDataList = res.data.data;
      });
    },
    confirmTeacherSet() {
      if (this.teacherDesc == "") {
        this.$message.warning("请填写老师简介");
        return;
      }
      var data = {
        teacherId: this.teacherId,
        liveId: this.liveId,
        teacherDesc: this.teacherDesc
      };
      SetTeacher(data).then(res => {
        if (res.data.data == 1) {
          saveLecturer(this.socialRoomId, {
            tableData: this.JGTeacher
          }).then(res => {});
        }
      });
    },
    setTeacher(val) {
      this.showTearch = true;
      this.liveId = val.liveId;
      this.socialRoomId = val.socialRoomId;
    },
    selectTearch(val) {
      this.selectTeacher = val.userName;
      this.teacherId = val.userId;
      val.name = val.userName + "（ID:" + val.userId + "）";
      val.status = 2;
      this.JGTeacher.push(val);
    },
    addTearcher() {
      getUserByKey(this.teacherName).then(res => {
        this.userList = res.data.data;
      });
    },
    toLiveDetail(val) {
      localStorage.setItem("liveInfo", JSON.stringify(val));

      this.$router.push({
        path: "addLive",
        query: {
          edite: true,
          liveId: val.liveId
        }
      });
    },
    selectDate(val) {
      console.log(val[1]);
    },
    goAddLive() {
      this.$router.push({
        name: "addLive",
        query: {
          edite: false
        }
      });
    },
    getLiveList() {
      LiveList(this.listQuery).then(res => {
        this.roomInfoList = res.data.data.data.data;
        this.listQuery.total = res.data.data.data.total;
        this.liveInfo = {
          finished: res.data.data.live.finished,
          live: res.data.data.live.live,
          accomplish: res.data.data.live.accomplish,
          count: res.data.data.live.count
        };
      });
    },
    async showAdrees(item) {
      await startLive({ liveId: item.liveId }).then(res => {
        this.adrees = res.data.data;
      });

      this.showPalyFlow = !this.showPalyFlow;
      var el = document.getElementById("qrcode");
      var childs = el.childNodes;

      for (var i = childs.length - 1; i >= 0; i--) {
        el.removeChild(childs[i]);
      }
      let qrcode = new QRCode("qrcode", {
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: this.adrees // 设置二维码内容或跳转地址
      });
    },
    handleCopy() {
      clip(this.adrees, event);
    }
  },
  mounted() {
    this.getLiveList();
    this.getClassData();
    this.$nextTick(() => {
      this.showAdrees();
    });
  }
};
</script>
<style scoped>
</style>
